<!-- 查看多文件 -->
<template>
  <el-popover
    placement="right"
    :width="400"
    :disabled="disabled"
    trigger="click"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <template #reference>
      <template v-if="fileList?.length || alwaysShow">
        <el-button v-if="!useSlot" class="view-button" type="primary" link @click="handleClick">{{
          buttonText
        }}</el-button>
        <div v-else @click="handleClick">
          <slot></slot>
        </div>
      </template>
      <span>-</span>
    </template>
    <div class="attachments-container">
      <div
        v-for="(url, index) in fileList as any"
        :key="index"
        class="attachment-item"
        @click.stop="viewFile(url)"
      >
        <div class="file-info">
          <span class="file-name">{{ getFilenameFromURL(url) }}</span>
        </div>

        <div class="file-actions">
          <el-button
            v-if="!disabledDownload"
            type="primary"
            size="small"
            plain
            @click.stop="downloadFile(url)"
          >
            下载
          </el-button>
          <el-button v-if="getFileCanView(url)" type="success" size="small" plain> 查看 </el-button>
        </div>
      </div>
    </div>
  </el-popover>
  <!-- 文件查看对话框 -->
  <FileViewDialog
    v-model="resourceDialogVisible"
    :title="currentResource?.title"
    :src="currentResource?.url"
    append-to-body
  />
</template>

<script setup lang="ts">
import download from '@/utils/download'
import { getFilenameFromURL } from '@/utils/index'
import { getFileCanView } from './utils'
defineOptions({ name: 'FileListView' })
const props: any = defineProps({
  fileList: {
    type: Array,
    default() {
      return []
    }
  },
  useSlot: {
    type: Boolean,
    default: false
  },
  // 是否禁用下载
  disabledDownload: {
    type: Boolean,
    default: false
  },
  // 是否常显示触发内容
  alwaysShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['referenceClick'])

// 文件查看相关
const resourceDialogVisible = ref(false) // 资源弹窗
const currentResource = ref() // 当前资源
const visible = ref(false)

const disabled = computed(() => {
  return props.fileList ? Number(props.fileList.length) < 2 : true
})
const buttonText = computed(() => {
  const url = props.fileList[0]
  if (props.fileList?.length > 1 || getFileCanView(url)) {
    return '查看文件'
  } else {
    return '下载文件'
  }
})
let isDialogClose = false
const updateVisible = (val: boolean) => {
  if (isDialogClose) {
    isDialogClose = false
    visible.value = true
  } else {
    visible.value = val
  }
}

const handleClick = () => {
  if (props?.fileList?.length === 1) {
    const url = props.fileList[0]
    viewFile(url)
  }
  emits('referenceClick', props.fileList)
}
const downloadFile = (url: string) => {
  download.file(url)
}
const viewFile = (url: string) => {
  if (getFileCanView(url)) {
    currentResource.value = { url }
    resourceDialogVisible.value = true
    isDialogClose = true
  } else {
    downloadFile(url)
  }
}
</script>

<style lang="scss" scoped>
.attachments-container {
  max-height: 350px;
  padding: 5px 10px;
  margin-top: 8px;
  overflow-y: auto;
  border-radius: 4px;
}

.attachment-item {
  display: flex;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: all 0.3s;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.file-icon {
  margin-right: 12px;
  font-size: 22px;
  color: var(--el-color-primary);
}

.file-name {
  display: -webkit-box;
  flex: 1;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  color: #606266;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //多行在这里修改数字即可
}

.file-actions {
  display: flex;
  flex-shrink: 0;
}
</style>
